import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Checkbox, Col, Icon, Input, InputNumber, message, Row } from 'antd';

const InputGroup = Input.Group;

class EnergyPriceCard extends Component {

  static defaultProps = {
    prices: [{"s":0,"e":-1,"c":1,"p":1}]
  };

  constructor(props) {
    super(props);
    const { prices } = this.props;
    this.state = {
      priceList: prices
    }
  }

  add = () => {
    const { priceList } = this.state;
    const s = priceList&&priceList.length>0?priceList[priceList.length-1]['e']:0;
    const price = { s, e: -1, c:1, p: 0};
    this.setState({
      priceList: [...priceList.map(item=>({
        ...item,
        c: 0,
      })), price]
    });
  }

  remove = (idx) => {
    const { priceList } = this.state;
    priceList.splice(idx, 1);
    this.setState({ priceList: [...priceList] });
  }

  handleCheckboxChange = (e, idx)=>{
    const { priceList } = this.state;
    priceList[idx]['c'] = e.target.checked?1:0;
    this.setState({ priceList: [...priceList] });
  }

  handleStartPrice = (value, idx)=>{
    const { priceList } = this.state;
    priceList[idx]['s'] = value;
    this.setState({ priceList: [...priceList] });
  }

  handleEndPrice = (value, idx)=>{
    const { priceList } = this.state;
    priceList[idx]['e'] = value;
    if(idx < priceList.length-1) {
      priceList[idx+1]['s'] = value;
    }
    this.setState({ priceList: [...priceList] });
  }

  handlePrice = (value, idx)=>{
    const { priceList } = this.state;
    priceList[idx]['p'] = value;
    this.setState({ priceList: [...priceList] });
  }

  save = (prices)=>{
    if(prices.length === 1) {
      if(prices[0]['c'] ===0 && prices[0]['e'] <= 0) {
        message.error('请填写正确的区间终结量');
        return false;
      }
    }
    for(let i=1; i<prices.length; i++) {
      if(prices[i]['c'] ===0 && (prices[i]['e'] <= 0||prices[i]['e'] <= prices[i-1]['e'])) {
        message.error('请填写正确的区间终结量');
        return false;
      }
    }
    // console.log('save', prices);
    this.props.savePriceCallback(prices);
  }

  buildItems = (prices)=>{
    let priceList = [];
    if(prices) {
      priceList = prices.map((item, idx)=>{
        return (
          <Row gutter={[16,16]} type='flex' align='middle'>
            <Col span={3} style={{textAlign: 'right'}}>{idx==0?'区间录入: ':''}</Col>
            <Col span={6}>
              <InputGroup compact>
                <InputNumber style={{width: '45%' }} step={0.1} value={item['s']} placeholder='起始量' disabled={true}/>
                <Input style={{width: '10%', borderLeft: 0, pointerEvents: 'none', backgroundColor: '#fff'}}
                       placeholder='~'
                       disabled
                />
                <InputNumber style={{width: '45%', borderLeft: 0}} step={0.1} value={item['e']} placeholder='终结量' disabled={item['c']===1} onChange={(value)=>this.handleEndPrice(value, idx)}/>
              </InputGroup>
            </Col>
            <Col span={3}>
              <Checkbox  style={{textAlign: 'center'}} checked={item['c']===1} onChange={(e)=>this.handleCheckboxChange(e, idx)} disabled={idx<prices.length-1}>无穷大</Checkbox>
            </Col>
            <Col span={2} style={{textAlign: 'right'}}>单价:</Col>
            <Col span={5}>
              <InputNumber style={{width: '100%'}} value={item['p']}  step={0.1}  onChange={(value)=>this.handlePrice(value, idx)}/>
            </Col>
            <Col span={5}>
              <Button type='danger' shape='circle' onClick={()=>this.remove(idx)}><Icon type='delete' /></Button>
            </Col>
          </Row>
        );
      });
    }
    return priceList;
  }

  render() {
    const { priceList } = this.state;
    return (
      <div>
        {this.buildItems(priceList)}
        <Row gutter={[16,16]}>
          <Col span={4} offset={11}>
            <Button block onClick={this.add}><Icon type='plus-circle' />添加区间</Button>
          </Col>
          <Col span={4}>
            <Button type='primary' block onClick={()=>this.save(priceList)}><Icon type='save' />保存</Button>
          </Col>
        </Row>
      </div>
    );
  }
}

EnergyPriceCard.propTypes = {
  energyCategory: PropTypes.object.isRequired,
  savePriceCallback: PropTypes.func.isRequired,
  prices: PropTypes.array,
}


export default EnergyPriceCard;


